<template>
  <div class="global-penetration">
    <ul>
      <li v-for="(item, index) in getPenetrationList" :key="index">
        <div class="left">
          <div class="point"></div>
          <i class="iconfont icon-a-icon-Largescreen"></i> {{ pageConfig.name
          }}<el-icon class="right-icon">
            <ArrowRight />
          </el-icon>{{ item.setups.componentName }}
        </div>
        <div class="right">
          <i class="iconfont icon-icon-edit" @click="handleEditOne(item)"></i>
          <i class="iconfont icon-delete" @click="handleDelete(item)"></i>
        </div>
      </li>
    </ul>
    <el-button link @click="handleAdd" :icon="Plus" class="add-penetration">添加穿透</el-button>
    <!-- <el-drawer v-model="addAndEditPenetrationDrawer" title="穿透配置" :show-close="false"> -->
    <bi-drawer v-model:drawer="addAndEditPenetrationDrawer" :append-to-body="true" :show-close="false">
      <template #header>
        <div>
          穿透设置
          <el-tooltip class="box-item" effect="dark" content="通过双击图表中的某一个值、数字组件、表格行数据后使用弹出框展示该数值、数据是由哪几条数据构成"
            placement="right-start">
            <i class="iconfont icon-prompt"></i>
          </el-tooltip>
        </div>
      </template>
      <penetration-public v-if="addAndEditPenetrationDrawer" :current-value="currentValue" :currentType="currentType"
        ref="penetrationPublicRef" @go-back="handleGoBack" />
    </bi-drawer>
    <!-- </el-drawer> -->
  </div>
</template>

<script setup>
import BiDrawer from '@/components/bi-drawer/main';
import { Plus, ArrowRight } from '@element-plus/icons-vue';
import { computed, ref, watch } from 'vue';
import PenetrationPublic from './penetration-public.vue';
import { flatList, getIdAndEditIt } from '@/utils/common';
import useComponentConfig from '@/views/design-center/store/component-config';

const useComponentConfigStore = useComponentConfig();

const { pageConfig } = useComponentConfigStore;

const addAndEditPenetrationDrawer = ref(false);

const currentValue = ref(null);

const penetrationPublicRef = ref();

const currentType = ref('add'); //新增-add,修改-edit

//获取配置穿透的组件列表
const getPenetrationList = computed(() => {
  return flatList(pageConfig.list).filter((item) => {
    return (
      item.setups.penetrationSettings &&
      JSON.stringify(item.setups.penetrationSettings) !== '{}'
    );
  });
});

watch(
  () => addAndEditPenetrationDrawer.value,
  (nv) => {
    if (!nv) {
      // console.log(
      //   '获取子集最新的值',
      //   penetrationPublicRef.value.formData,
      //   currentValue.value?.id
      // );
      if (currentType.value === 'edit') {
        getIdAndEditIt(
          useComponentConfigStore.pageConfig.list,
          currentValue.value?.id,
          'setups',
          {
            penetrationSettings: penetrationPublicRef.value.formData
          }
        );
      } else {
        // console.log(
        //   '获取子集最新的值',
        //   penetrationPublicRef.value.currentId,
        //   currentValue.value?.id
        // );
        //新增的时候组件id从子组件获取
        getIdAndEditIt(
          useComponentConfigStore.pageConfig.list,
          penetrationPublicRef.value.currentId,
          'setups',
          {
            penetrationSettings: penetrationPublicRef.value.formData
          }
        );
      }

    }
  }
);
/**
 * @description:添加穿透
 * @return {*}
 */
const handleAdd = () => {
  currentType.value = 'add';
  addAndEditPenetrationDrawer.value = true;
};

/**
 * @description:编辑穿透关系
 * @param {*} val
 * @return {*}
 */
const handleEditOne = (item) => {
  currentType.value = 'edit';
  addAndEditPenetrationDrawer.value = true;
  currentValue.value = item;
  // console.log('修改的时候', item.setups.penetrationSettings);
  // let penetrationSettings = item.setups.penetrationSettings;

  // addAndEditPenetrationDrawer.value = true;
  // console.log(item.setups.penetrationSettings, 222222222);
  // let events = farther.linkageSetting.events;
  // events.splice(sonIndex, 1);
};
/**
 * @description:删除穿透关系
 * @param {*} id
 * @return {*}
 */
const handleDelete = (item) => {
  // console.log(item.setups.penetrationSettings, 222222222);
  // let events = farther.linkageSetting.events;
  // events.splice(sonIndex, 1);
  getIdAndEditIt(useComponentConfigStore.pageConfig.list, item.id, 'setups', {
    penetrationSettings: {}
  });
};
const handleGoBack = () => {
  addAndEditPenetrationDrawer.value = false;
};
defineExpose({
  addAndEditPenetrationDrawer
});
</script>
<style scoped lang="scss">
.global-penetration {
  padding: 0.16rem 0.24rem 0 0.3rem;

  :deep(.el-drawer) {
    width: 6.4rem !important;
  }
}

.add-penetration {
  color: #165dff;
}

li {
  display: flex;
  justify-content: space-between;
  padding: 0.05rem 0.12rem;
  align-items: center;

  .left {
    display: flex;
    align-items: center;

    .point {
      width: 0.04rem;
      height: 0.04rem;
      border-radius: 50%;
      background: #e5e6eb;
    }

    .icon-a-icon-Largescreen {
      margin: 0 0.07rem 0 0.15rem;
    }

    .right-icon {
      margin: 0 0.08rem 0 0.08rem;
    }
  }

  .right {

    .icon-icon-edit,
    .icon-delete {
      color: #165dff;
    }

    .icon-delete {
      margin-left: 0.16rem;
    }
  }
}
</style>
